<template>
  <div>
    <el-card shadow="never" :body-style="{padding:0}">
      <el-tabs @tab-click="tabsClick" v-model="activeName" stretch>
        <el-tab-pane v-for="item in configList" :key="item.id" :name="item.name" :label="item.name"></el-tab-pane>
      </el-tabs>
    </el-card>
    <div class="content">
      <keep-alive>
        <component :is="component"></component>
      </keep-alive>
    </div>
  </div>
</template>

<script>
import {mapGetters} from 'vuex'
// 共享用户配置
import sharedUser from './compoents/sharedUser'
// 复借用户配置
import oldUser from "./compoents/oldUser";
// 数据用户配置
import dataUser from "./compoents/dataUser";
// 流量用户配置
import flowUser from "./compoents/flowUser";
// 转化用户配置
import transformUser from "./compoents/transformUser"
export default {
  name: 'MarketConfig',
  data() {
    return {
      activeName: '',
      component: '',
      configList: []
    }
  },
  computed: {
    ...mapGetters(['permissionList']),
  },
  components: {
    sharedUser,
    dataUser,
    flowUser,
    oldUser,
    transformUser
  },
  mounted() {
    this.configList = this.permissionList.filter(item => {
      return [646, 657, 668, 675,1167].indexOf(item.id) !== -1
    })
    const tabsData = this.configList[0]
    this.activeName = tabsData.name
    this.tabsClick(tabsData)
  },
  methods: {
    tabsClick(value) {
      const {name} = value
      const paneItem = this.configList.filter(item => item.name === name)[0]
      this.component = paneItem.webUrl
    }
  }
}
</script>

<style scoped>
>>> .el-tabs__active-bar {
  height: 4px !important;
}

>>> .el-tabs__header {
  margin: 0px !important;
}

>>> .el-tabs__nav {
  padding: 10px 0;
}

>>> .el-tabs__nav-next {
  line-height: 60px !important;
}

>>> .el-tabs__nav-prev {
  line-height: 60px !important;
}

.content {
  margin-top: 10px;
}
</style>
